<template>
  <div class="wrap-bg">
    <div 
        class="head-box h-360" 
        :style="{background: `url(${getAssetsImages('stockRights-bg')}) no-repeat`, 'background-size': '100%'}"
    >
    </div>
    <div class="padlr320 padtb30">
        <div class="search-box flex ju-bt">
            <div class="search-filter flex-a ju-bt padtb20 padlr50">
                <div class="filter-city flex flex-a">
                    <el-dropdown trigger="click">
                        <span class="flex-a search-txt">
                            <span class="mar-r5">中国</span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-service">
                    <span class="txt-select">股权设计</span>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-service flex flex-a">
                    <el-dropdown trigger="click">
                        <span class="flex-a search-txt">
                            <span class="mar-r5" :class="{'txt-select': false}">请选择服务项</span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                    <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-form flex-a">
                    <div class="form-label">
                        姓名
                    </div>
                    <div class="form-ipt">
                        <el-input v-model="filterForm.name" style="width: 150px" placeholder="请输入姓名" />
                    </div>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-form flex-a">
                    <div class="form-label">
                        手机
                    </div>
                    <div class="form-ipt">
                        <el-input 
                            v-model="filterForm.mobile" 
                            style="width: 150px;" 
                            placeholder="请输入联系方式" 
                        />
                    </div>
                </div>
            </div>
            <div class="search-btn">
                立即咨询
            </div>
        </div>
    </div>
    <div class="card-list-box padlr320">
        <div 
            class="list-li mar-t20"
            v-for="(item, index) in listModule.list"
            :key="index"
        >
            <div v-if="!index">
                <div class="block-tit">{{ item.info.title }}</div>
                <div class="block-tabs-card flex flex-wrap  mar-t39" v-if="item.info">
                    <div class="card-l">
                        <el-image 
                            style="height: 160px;" 
                            :src="getAssetsImages(item.info.img)" 
                        />
                        <div class="card-l-info padlr20 pad-t10 pad-b19">
                            <div class="info-tit">{{ item.info.title }}</div>
                            <div class="info-tips mar-t8">{{ item.info.describe }}</div>
                            <div class="info-price mar-t25">
                                <span class="price-unit">￥</span>
                                <span class="price-num">{{item.info.price }}</span>
                                <span class="price-label">/件起</span>
                            </div>
                            
                        </div>
                        <div class="info-btn flex ju-bt ">
                            <div class="btn" @click="onCardLi(item.info)">查看详情</div>
                            <div class="btn btn2" >立即购买</div>
                        </div>
                    </div>
                    <div class="card-list pad-l20 flex flex-wrap">
                        <div 
                            class="card-li"
                            v-for="(childItem, childIndex) in item.child"
                            :key="childIndex"
                            @click="listModule.currentId = childItem.id"
                            :class="{'mar-t20': childIndex > 1, 'mar-r30': (childIndex + 1) % 2 != 0}"
                        >
                            <div 
                                class="card-li-item pad20"
                                :style="{
                                    background: childItem.id === listModule.currentId ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                                    'background-size': '100% 100%'
                                }"
                            >
                                <div class="card-tit flex-a ju-bt">
                                    <div class="flex-a">
                                        <span class="tit-txt">{{ childItem.title }}</span>
                                    </div>
                                    <el-image 
                                        @click="onCardLi(childItem, index)"
                                        style="width: 30px; height: 30px" 
                                        :src="getAssetsImages('arrows-icon')" 
                                    />
                                </div>
                                <div class="card-tips mar-t8">
                                    {{ childItem.describe }}
                                </div>
                                <div class="card-price  mar-t20 flex-a ">
                                    <span class="price-unit">￥</span>
                                    <span class="price-num">{{ childItem.price }}</span>
                                    <span class="price-label">/件起</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div 
                class="list-card-one "
                 v-if="!index || index > 1"
            >
                <div class="block-tit mar-t60">{{ item.info.title }}</div>
                <div class="flex ju-bt mar-t30 flex-wrap">
                    <div 
                        class="one-child"
                        v-for="(childItem, childIndex) in item.child"
                        :key="childIndex"
                        :class="{'mar-t30': childIndex > 1}"
                    >
                        <div 
                            class="one-child-tit flex-a ju-bt pad-l30 pad-r20"
                            :style="{background: `url(${getAssetsImages('agency-card')}) no-repeat`, 'background-size': '100%'}"
                        >
                            <div>{{ childItem.title }}</div>
                            <el-image 
                                style="width: 30px; height: 30px" 
                                :src="getAssetsImages('arrows-icon')" 
                            />
                        </div>
                        <div class="one-child-info pad-t26 pad-l30 pad-r20">
                            <div class="child-info-describe">
                                {{ childItem.describe }}
                            </div>
                            <div class="one-child-price flex-a ju-bt mar-t37">
                                <div class="card-price">
                                    <span class="price-unit">￥</span>
                                    <span class="price-num">{{ childItem.price }}</span>
                                    <span class="price-label">/件起</span>
                                </div>
                                <div class="child-info-btn">
                                    立即购买
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <service-process :service_id="service_id" parentType="tos"></service-process>
    <advantage :service_id="service_id" parentType="tos"></advantage>
  </div>
</template>

<script setup>
/**
 * 股权设计服务
*/
// 服务流程组件
import serviceProcess from "@/components/serviceProcess/index.vue";
// 平台优势组件
import advantage from "@/components/advantage/advantage.vue"
import { ref, reactive } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const router = useRouter();
const route = useRoute()
const service_id = ref(route.query.id ?? '')
const toPath = item => {
    if(!item) return
    router.push({
        path: 'productDetail',
        query: {
            id: item.id,
            title: item.title,
        }
    });
};
let filterForm = reactive({
    name: "",
    mobile: ""
})
let listModule = reactive({
    currentId: 1,
    list: [
        {
            info: {
                title: "股权设计",
                describe: "专人办理快速拿证，助力企业合法合规经营",
                price: "2500.00",
                img: "card-bg3"
            },
            child: [
                {
                    title: "股权架构设计",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00",
                    id: 1,
                },
                {
                    title: "股权架构设计",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                {
                    title: "股权架构设计",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                {
                    title: "股权架构设计",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                
            ]
        },
        {
            info: {
                title: "员工激励",
                describe: "专人办理快速拿证，助力企业合法合规经营",
                price: "2500.00",
                img: "card-bg3"
            },
            child: [
                {
                    title: "绩效考核体系",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                {
                    title: "绩效考核体系",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                {
                    title: "绩效考核体系",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                {
                    title: "一般纳税人代账",
                    describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                    price: "2500.00"
                },
                
            ]
        },
    ]
})
const onCardLi = (item, index) => {
    if (index) {
        listModule.currentId = item.id;
    }
    toPath('productDetail', item)
}
// 获取列表
const getList = () => { 
    return serviceApi.getList({
        type: service_id.value,
        is_all: 0
    }).then(res => { 
        // changeBox.changeList = res.data.child
        // changeBox.changeInfo = res.data.info
    })
}
getList();
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.list-card-one {
    .one-child {
        min-width: 620px;
        width: 48%;
        .one-child-tit {
            width: 100%;
            height: 80px;
            background: #f1f4f8;
            border: 1px solid #e5e8eb;
            border-radius: 4px 4px 0px 0px;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        }
        .one-child-info {
            height: 149px;
            background: #ffffff;
            border: 1px solid #e5e8eb;
            border-radius: 0px 0px 4px 4px;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            
            .one-child-price {
                .child-info-btn {
                    width: 140px;
                    height: 44px;
                    border: 1px solid #0052d9;
                    border-radius: 4px;
                    box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                    font-size: 16px;
                    font-family: PingFang TC, PingFang TC-Regular;
                    font-weight: Regular;
                    text-align: center;
                    color: #0052d9;
                    line-height: 44px;
                    text-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                }
            }
        }
    }
}
.block-tabs-card {
    .card-l {
        height: 351px;
        width: 412px;
        background: linear-gradient(180deg,#f0f3f7, #ffffff);
        border: 2px solid #ffffff;
        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        .card-l-info {
            .info-tit {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: left;
                color: #181818;
            }
            .info-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #575966;
            }
            .info-price {
                .price-unit,
                .price-num {
                    color: #ff4600;
                }  
                .price-num {
                    font-size: 28px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: Semibold;
                    text-align: left;
                }
                .price-label {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #181818;
                }
            }
        }
        .info-btn {
            .btn {
                width: 50%;
                height: 40px;
                background: #80a8ec;
                border-radius: 0px 0px 0px 4px;
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: Medium;
                text-align: center;
                color: #ffffff;
                line-height: 40px;
            }
            .btn2 {
                background: #0052d9;
                border-radius: 0px 0px 4px 0px;
            }
        }
    }
    .card-list {
        width: calc(100% - 412px) ;
        .card-li {
            min-width: 380px;
            width: 48%;
            .card-li-item {
                // height: 140px;
                background: linear-gradient(180deg,#f0f3f7, #ffffff);
                border: 2px solid #ffffff;
                border-radius: 4px;
                box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                .card-tit {
                    .tit-txt {
                        font-size: 16px;
                        font-family: PingFang SC, PingFang SC-Semibold;
                        font-weight: bold;
                        text-align: left;
                        color: #181818;
                    }
                    .tit-hot {
                        width: 30px;
                        height: 16px;
                        background: #ff4d00;
                        border-radius: 6px 6px 6px 2px;
                        font-size: 12px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: bold;
                        text-align: center;
                        color: #ffffff;
                        line-height: 17px;
                    }
                }
                .card-tips {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #575966;
                }
                .card-price {
                    .price-unit,
                    .price-num {
                        color: #ff4600;
                    }  
                    .price-num {
                        font-size: 28px;
                        font-family: PingFang SC, PingFang SC-Semibold;
                        font-weight: Semibold;
                        text-align: left;
                    }
                    .price-label {
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #181818;
                    }
                    .price-btn {
                        width: 88px;
                        height: 32px;
                        border: 1px solid #0052d9;
                        border-radius: 2px;
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #0052d9;
                        text-align: center;
                        line-height: 32px;
                    }
                    .price-btn-on {
                        background: #0052d9;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}

:deep(.el-input__wrapper) {
    box-shadow: none;
    // flex-grow: 0;
    // background: transparent ;
    // width: 100%;
}
:deep(.search-txt:focus) {
  outline: none;
}
.search-box {
    height: 64px;
    background: #ffffff;
    border: 1px solid #1752d9;
    border-radius: 4px;
    
    span {
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        font-size: 15px;
    }
    .search-filter {
        width: calc(100% - 160px);
        span {
            color: #222426;
        }
        .filter-form {
            .form-label {
                line-height: 20px;
            }
        }
        .filter-service {
            span {
                color: #a2a6ad;
            }
            
            .txt-select {
                color: #222426;
            }
        }
    }

    .search-btn {
        width: 160px;
        height: 64px;
        background: #0052d9;
        border-radius: 0px 4px 4px 0px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #ffffff;
        text-align: center;
        line-height: 64px;
    }
}
</style>